<template>
  <gesture-back>
    <view class="detail-container">
      <!-- 顶部导航栏 -->
      <view class="header">
        <view class="back-btn" @tap="goBack">
          <image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
        </view>
        <text class="title">换班详情</text>
        <view class="header-actions">
          <view class="action-icon" @tap="collectExchange">
            <image :src="isCollected ? '/static/icons/star-filled.png' : '/static/icons/star.png'" mode="aspectFit" class="icon-img"></image>
          </view>
          <view class="action-icon" @tap="shareExchange">
            <image src="/static/icons/share.png" mode="aspectFit" class="icon-img"></image>
          </view>
        </view>
      </view>
      
      <!-- 主要内容 -->
      <view class="content">
        <!-- 发布者信息 -->
        <view class="publisher-info">
          <view class="avatar">
            <text class="avatar-text">卖家</text>
          </view>
          <view class="info">
            <text class="name">{{orderDetail.sellerName}}</text>
            <text class="time">{{orderDetail.publishTime}}</text>
          </view>
        </view>
        
        <!-- 订单详情卡片 -->
        <view class="order-card">
          <view class="card-header">
            <text class="route">{{orderDetail.departure}} → {{orderDetail.destination}}</text>
            <text class="status" :class="orderDetail.statusClass">{{orderDetail.statusText}}</text>
          </view>
          
          <!-- 订单信息表格 -->
          <view class="order-info-table">
            <view class="table-row">
              <view class="table-cell label">航司-基地</view>
              <view class="table-cell value">{{orderDetail.airlineAndBase}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">起飞落地时间</view>
              <view class="table-cell value">{{orderDetail.flightTime}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">执飞航班</view>
              <view class="table-cell value">{{orderDetail.flightNo}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">执飞号位</view>
              <view class="table-cell value">{{orderDetail.position}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">期望换班时间</view>
              <view class="table-cell value">{{orderDetail.mealTime}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">期望目的地</view>
              <view class="table-cell value">{{orderDetail.mealLocation}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">期望号位</view>
              <view class="table-cell value">{{orderDetail.mealPosition}}</view>
            </view>
            <view class="table-row">
              <view class="table-cell label">期望机型</view>
              <view class="table-cell value">{{orderDetail.aircraft}}</view>
            </view>
          </view>
        </view>
        
        <!-- 备注信息 -->
        <view class="remarks-section">
          <view class="section-title">备注</view>
          <view class="remarks-content">
            <text>{{orderDetail.remarks || '暂无备注信息'}}</text>
          </view>
        </view>
        
        <!-- 评论区域 -->
        <view class="comments-section">
          <view class="section-title">评论</view>
          <comments ref="commentsComponent" />
        </view>
      </view>
      
      <!-- 底部评论输入框 -->
      <view class="comment-box">
        <input type="text" placeholder="写下你的评论..." v-model="commentText" class="comment-input" />
        <view class="comment-btn" @tap="submitComment">发送</view>
      </view>
    </view>
  </gesture-back>
</template>

<script>
import GestureBack from '@/components/gesture-back/index.vue';
import Comments from '@/components/common-comments/index.vue';

export default {
  components: {
    GestureBack,
    Comments
  },
  data() {
    return {
      id: '',
      isCollected: false,
      commentText: '',
      orderDetail: {
        sellerName: '张机长',
        publishTime: '2024-03-15 10:30',
        departure: '广州',
        destination: '北京',
        statusText: '待交换',
        statusClass: 'open',
        airline: '南航',
        airlineAndBase: '南航-广州',
        route: '广州→北京',
        flightTime: '3-15 8:00-3-15 18:00',
        flightNo: '320',
        position: 'AT',
        mealTime: '3-15 - 3-17',
        mealLocation: '呼和浩特、鄂尔多斯',
        mealPosition: 'AT、BAT',
        aircraft: '320、330、737、787',
        remarks: '单号单班，急换',
        contactPhone: '13800138000',
        contactWechat: 'flyingpilot888'
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getOrderDetail()
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    async getOrderDetail() {
      try {
        // TODO: 从API获取订单详情
        console.log('获取订单详情，ID:', this.id)
        
        // 这里模拟异步操作
        await new Promise(resolve => setTimeout(resolve, 500))
        
        // 实际应用中这里会从API获取数据
        // this.orderDetail = result.data
      } catch (error) {
        uni.showToast({
          title: '获取订单信息失败',
          icon: 'none'
        })
      }
    },
    collectExchange() {
      this.isCollected = !this.isCollected
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '已取消收藏',
        icon: 'none'
      })
    },
    shareExchange() {
      uni.showActionSheet({
        itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
        success: (res) => {
          console.log('分享选项:', res.tapIndex)
          uni.showToast({
            title: '分享功能开发中',
            icon: 'none'
          })
        }
      })
    },
    submitComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        });
        return;
      }
      
      // 创建新评论对象
      const newComment = {
        id: Date.now(),
        username: '我',
        avatar: '/static/logo.png',
        content: this.commentText,
        time_str: new Date().toISOString().split('T')[0],
        location: '',
        likes: 0,
        isLiked: false,
        replies: []
      };
      
      try {
        if (this.$refs.commentsComponent) {
          this.$refs.commentsComponent.addComment(newComment);
          console.log('评论已添加到组件');
        } else {
          console.error('评论组件未找到');
        }
      } catch (error) {
        console.error('添加评论失败:', error);
      }
      
      uni.showToast({
        title: '评论成功',
        icon: 'success'
      });
      
      this.commentText = '';
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .icon-img {
    width: 44rpx;
    height: 44rpx;
    /* 添加滤镜使图标变为黑色 */
    filter: brightness(0);
  }
}

.content {
  flex: 1;
  padding: 0 30rpx;
  padding-bottom: 120rpx; /* 为底部评论框预留空间 */
}

.publisher-info {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  background-color: #1989fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.avatar-text {
  color: #ffffff;
  font-size: 24rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 4rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.order-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.route {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  
  &.open {
    color: #1989fa;
    background-color: #e8f3ff;
  }
  
  &.pending {
    color: #ff9900;
    background-color: #fff7e6;
  }
  
  &.completed {
    color: #52c41a;
    background-color: #f6ffed;
  }
  
  &.cancelled {
    color: #999;
    background-color: #f5f5f5;
  }
}

.order-info-table {
  margin-top: 16rpx;
}

.table-row {
  display: flex;
  padding: 12rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f9f9f9;
  
  &:last-child {
    border-bottom: none;
  }
}

.table-cell {
  padding: 8rpx 0;
  
  &.label {
    flex: 0 0 200rpx;
    color: #999;
  }
  
  &.value {
    flex: 1;
    color: #333;
  }
}

.remarks-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}

.remarks-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.comments-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.comment-box {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.comment-input {
  flex: 1;
  padding: 20rpx;
  border: 1rpx solid #e8e8e8;
  border-radius: 24rpx;
  background-color: #f5f5f5;
  font-size: 28rpx;
  line-height: 1.4;
}

.comment-btn {
  padding: 20rpx 24rpx;
  background-color: #6c5ce7;
  color: #ffffff;
  border-radius: 24rpx;
  margin-left: 16rpx;
  font-size: 28rpx;
  min-width: 80rpx;
  text-align: center;
  
  &:active {
    background-color: #5a4fcf;
  }
}
</style> 